<template>
  <!-- 短视频页面 -->
 <div class="short-video-box" ref="childHome">
     <ul>
       <van-list
        v-model="loading"
        :finished="finished"
        :immediate-check="false"
        finished-text="—   没有更多了  —"
        @load="onLoad"
      >
       <li v-for="(item ,i) in shortVideoList" :key="i" class="li-item">
         <img :src="item.imgUrl || item.imagUrl" @click="detail(item.id)" alt=""/>
         <p class="detail">
           <span class="title">{{item.title | ellipsis(6)}}</span>
           <span class="zan-box"><i @click="zan"></i><span>{{item.goods||item.like |filtNum}}</span></span>          
         </p>
       </li> 
       </van-list>
     </ul>
     <Disclaimer v-if="finished"></Disclaimer>
 </div>
</template>

<script>
import HeadTitle from './headTitle' //头部标题组件
import LiveStatus from './liveStatus'//直播状态组件
import Disclaimer from '../components/Disclaimer';//免责声明组件
  export default {
     components:{
       HeadTitle,
       LiveStatus,
       Disclaimer
     },
    props: {
      status : 0,
      title:String,
      isMore:Boolean,
      isSearchResult:Boolean,//搜索结果页引用此组件
      shortVideoList:{
        type: Array,
        default: [
        ],
      },
      searchFinished:Boolean,
    },
    data() {
      return {
        isZan:false,
        page:1,
        loading: false,
        finished: false,
      };
    },
    computed: {},
    created() {
    },

    mounted() {
      if(!this.isSearchResult){
        this.getshortVideo()

      }
    },
    methods: {
      onLoad(){
        if(this.isSearchResult){ //首页搜索结果页
          this.$emit('loadeMore',{type:'loadeMore',data:{'data':'加载更多'}})
        }else{
          // this.getshortVideo()
        }
        
        // ;
      },
      zan(){
        this.isZan = !this.isZan
      },
      // 详情
      detail(id){
        this.$router.push({
		             path: `/${this.$channel}/shortVideoDetail?id=${id}`,
		         });
      },
      	// 短视频接口
        getshortVideo(){
				this.$http.get("/h5live/channel/shortVideo?type=" + 2  + "&page=" + this.page+ "&pageSize=" + 10)
					.then(res => {
					   let {data,code} = res.data
					   if(data && code ==='000000'){
               this.loading = false
               this.page ++;
						   if(data.length < 10){
							   this.finished = true
						   }
						   this.shortVideoList= this.shortVideoList.concat(data) //短视频数据
					   }
					})
					.catch(response => {
						console.log(response);
					});

			},
    },
    watch: {
      searchFinished(val,oldVal){
        if(val){
          this.loading = false;
          this.finished = true; //加载完成
        }
      },
    },
     filters: {
      //标题超过num个显示省略号
      ellipsis: function (value,num) {
        if (!value) return ''
        return value.length > num ? value.substring(0,num)+'...' : value
      },
      filtNum(num) {
        if (num > 10000) {
          num =  `${(num/10000).toFixed(1)}万` 
        } 
        return num
    }, 
      }
  };
</script>
<style scoped="scoped">
 .short-video-box{
   padding:0 30px;
   padding-bottom: 100px;
 }
 .short-video-box .van-list{
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-between;
 }
 .short-video-box .van-list /deep/ .van-list__loading{
   width: 100%;
 }
 .short-video-box .van-list /deep/ .van-list__finished-text{
   width: 100%;
 }
 .li-item{
	 width: 330px;
	 margin-bottom: 24px;
 }
 .li-item img{
	 width: 100%;
	 height: 590px;
   margin-bottom: 10px;
	 border-radius: 10px;
 }
 .detail{
   display: flex;
   justify-content: space-between;
 }
 .detail .title{
  flex: 1;
  font-size: 30px;
  color: #666666;
 }
  .zan-box{
    max-width: 120px;
   display: flex;
   flex-direction: row;
   align-items: center;

 }
  .zan-box span{
    font-size: 30px;
    color: #999999;
  }
 .zan-box i{
    height: 32px;
    width: 33px;
    margin-right: 6px;
    background: url('../../assets/images/zhxyk/home/zan.png') no-repeat;
    background-size: 100% 100%;
 }
 .zan-box i.active{
    background: url('../../assets/images/zhxyk/home/zan_active.png') no-repeat;
    background-size: 100% 100%;

 }
 .short-video-box .disclaimer-box{
   padding: 0;
 }
</style>
